<template>
    <div class="competition-detail">
        <img :src="item.image_url" width="100px" height="100px">
        <div class="caption">
            <div class="title-people">
                <h2>{{ item.competition_name }}</h2>
                <div>
                    {{ $t('langObj.team') }}<span>{{ item.joinCount }}</span>
                    {{ $t('langObj.participants') }}<span>{{ item.joinMemberCount }}</span>
                    {{ $t('langObj.tijiao') }}<span>{{ item.submitCount }}</span>
                </div>
            </div>
            <div class="progress-button">
                <div class="progress">
                    <Steps :current="current" direction="horizontal">
                        <Step :title="$t('langObj.baoming')" :content="enroll_start_time"></Step>
                        <Step :title="$t('langObj.baomingjiezhi')" :content="enroll_end_time"></Step>
                        <Step :title="$t('langObj.submitResult')" :content="start_time"></Step>
                        <Step :title="$t('langObj.competitionEnd')" :content="submission_deadline"></Step>
                        <Step :title="$t('langObj.juesai')" :content="end_time"></Step>
                    </Steps>
                </div>
                <div>
                    <Button v-if="status === 1" @click="submitResultModal = true" style="background-color:#C2142F;color:#fff;border:none">{{ $t('langObj.submitFile') }}</Button>
                    <Button v-if="status === 0" @click="createGroupModal = true" style="background-color:#C2142F;color:#fff;border:none">{{ $t('langObj.baoming') }}</Button>
                    <Button >{{ $t('langObj.fenxiang') }}</Button>
                </div>
            </div>
        </div>
        <Modal
            @on-ok="sign_up"
            v-model="createGroupModal"
            :mask-closable="false"
            width="600"
            title="报名信息">
            <div style="padding:20px">
                <div class="span-choice">
                    <span @click="personChoice" :class="type === 1 ? 'span-choice-bgcolor':'span-default-bgcolor'">
                        <Icon type="ios-person" size="16"/>个人参赛
                    </span>
                    <span @click="groupChoice" :class="type === 2 ? 'span-choice-bgcolor':'span-default-bgcolor'">
                        <Icon type="ios-people" size="16"/>多人参赛
                    </span>
                </div>
                <Avatar size="large" style="display:block;margin:20px auto">USER</Avatar>
                <Form :label-width="120">
                    <FormItem label="个人参赛:"> 
                        <span>用户可以被多人参赛的用户邀请加入团队，但不可主动邀请其他用户</span>
                    </FormItem>
                    <FormItem label="多人参赛:">
                        <span>用户可以邀请个人参赛的用户加入团队，但不能被其他用户邀请</span>
                    </FormItem>
                    <FormItem label="参赛名称/团队名称:">
                        <Input type="text" style="width:250px" v-model="groupName"/>
                    </FormItem>
                    <FormItem label="介绍:">
                        <Input type="textarea" style="width:250px"/>
                    </FormItem>
                </Form>
            </div>
        </Modal>
        <Modal
            v-model="submitResultModal"
            :mask-closable="false"
            width="400"
            title="提交文件"
            >
            <div style="font-size:16px;margin:10px;color:rgba(51,51,51,1);">要求:</div>
            <p style="font-size:12px;margin:10px;color:rgba(102,102,102,1);">请确保其文件格式为[csv]</p>
            <div style="font-size:16px;margin:10px;color:rgba(51,51,51,1);">提交文件:</div>
            <Upload style="margin-left:10px;"
                ref="upload"
                :headers="uploadHeader"
                :action="uploadUrl"
                :data="fileData"
                :format="['csv']"
                :max-size="2048"
                :before-upload="beforeUpload"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                >
                <Button icon="ios-cloud-upload-outline">选择文件</Button>
            </Upload> 
            <div slot="footer">
                <Button type="default" @click="submitResultModal = false">关闭</Button>
            </div>       
        </Modal>
    </div>
</template>

<script>
import { formatData } from '@/utils/format';
import { getToken } from '@/utils/auth';
import { submitFileUrl } from '@/api/competitions';
import { mapActions,mapGetters } from 'vuex';
export default {
    name:"competitionDetail",
    props:{
        item:{
            type:Object,
            required:true
        },
        id:{
            type:[Number,String]
        }
    },
    computed: {
        uploadHeader(){
            return{
                'Authorization':getToken()
            }
        },
        uploadUrl(){
            return submitFileUrl()
        },
        enroll_start_time(){
            return formatData(this.item.enroll_start_time,'competition')
        },
        enroll_end_time(){
            return formatData(this.item.enroll_end_time,'competition')
        },
        start_time(){
            return formatData(this.item.start_time,'competition')
        },
        end_time(){
            return formatData(this.item.end_time,'competition')
        },
        submission_deadline(){
            return formatData(this.item.submission_deadline,'competition')
        },
        current(){
            let timestamp = (new Date()).getTime();
            if(timestamp < this.item.start_time){
                return 0
            }else if(this.item.start_time <= timestamp && timestamp < this.item.rematch_time){
                return 1
            }else if(this.item.rematch_time <= timestamp && timestamp < this.item.end_time){
                return 2
            }else{
                return 3
            }
        }
    },
    data(){
        return {
            status:null,
            type:1,
            createGroupModal:false,
            groupName:"",
            submitResultModal:false,
            fileData:{
                competition_id:"",
                group_id:"",
                type:"res"
            }
        }
    },
    methods: {
        ...mapActions(['XgetUserSignUpStatus','XcompetitionSignUp','XcreateGroup','XgetMyGroup']),
        personChoice(){
            this.type = 1;
        },
        groupChoice(){
            this.type = 2;
        },
        sign_up(){
            this.XcompetitionSignUp(this.id).then(res => {
                this._pageMounted();
                this.$Message.success('报名成功');
                this.XcreateGroup({
                    cmpId:this.id,
                    groupName:this.groupName,
                    type:this.type,
                }).then(res => {
                    this.$Message.success('创建团队成功');
                    this.createGroupModal = false;
                })
            })
            .catch(err => {
                this.$Message.error(err.response.data.message);
            })
        },
         beforeUpload(file){
            this.fileData.competition_id = this.$store.getters.info.competition_id
            this.fileData.group_id = this.$store.getters.info.group_id
        },
        uploadSuccess(){
            this.submitResultModal = false;
            this.$Message.success('提交成功');
        },
        uploadError(error, file){
            this.$Message.error(file.message);
            
        },
        _pageMounted(){
            this.XgetUserSignUpStatus(this.id).then(res => {
                this.status = res.data
            })
        }
    },
    mounted() {
        this._pageMounted()
    },
}
</script>

<style lang="scss" scoped>
    .competition-detail{
        background-color:#fff;
        padding:24px;
        border-bottom: 1px solid #f7f7f7;
        display: flex;
        justify-content: space-between;
        .caption{
            margin-left: 22px;
            color:#333;
            flex:1;

            .title-people{
                margin-bottom: 40px;
                display: flex;
                justify-content: space-between;

                div > span{
                    font-size: 16px;
                    font-weight: 600;
                    margin:0 20px;
                    color:#C2142F;
                }
            }

            .progress-button{
                display: flex;
                justify-content: space-between;
                
                .progress{
                    width: 800px;
                }
            }   
        } 
    }
    .span-choice{
            display:flex;
            margin: 0 auto;
            width: 400px;
            justify-content: space-around;
            align-items: center;
            
            span{
                width: 150px;
                height:30px;
                line-height: 30px;
                border-radius:6px;
                text-align: center;
                color:#FFFFFF;
                &:hover{
                    cursor: pointer;
                }
            }
        }
        .span-choice-bgcolor{
            background-color:#00B7EE;
        }
        .span-default-bgcolor{
            background-color:#666666;
        }
</style>
